<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <!-- <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1"> -->

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Insert title here</title>

</head>




<body>

<a class="easyui-linkbutton" οnclick="hideAndShowSlideBoard();"><b>面板</b></a>

<div id="slideBoard"

     style="overflow:hidden;background-color: #330fff;  left: 0px;bottom: 0; width: 100%;height: 25%; position: absolute; display: none;"

     οnmοusedοwn="mouseDown(this,event)">

</div>

<script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>

<script type="text/javascript" src="jquery.panelslider.min.js"></script>




<script type="text/javascript">



    var countClick = 0; //按钮点击次数

    var initRate = 0.75; // 滑动面板初始显示比例

    var mobileOldY = 0; //手机端记录初始点击y轴的值

    var moblieTop = 0; //记录初始点击时滑板的top值

    var mobileOldTIME = new Date().getTime();//记录初始点的时间




    //PC阻止滚动条

    //document.documentElement.style.overflowY = 'hidden';



    var slideBoard = document.getElementById('slideBoard');



    slideBoard.style.top = Math.ceil($(window).height() * initRate) + "px";

    slideBoard.style.height = Math.ceil($(window).height() * (1 - initRate)) + "px";

    document.addEventListener('touchstart', touchStart);




    //滑动开始事件  mobile

    function touchStart(e) {
        console.log(1111);



        if (countClick == 1 && e.touches[0].clientY >= parseInt(slideBoard.style.top)) {



            mobileOldY = e.touches[0].clientY;

            moblieTop = parseInt(slideBoard.style.top);

            mobileOldTIME = new Date().getTime();



            document.addEventListener('touchmove', touchMove);



            document.addEventListener('touchend', touchEnd);

        }

    }



    function touchMove(e) {
        e.preventDefault();

        var y = e.touches[0].clientY - mobileOldY;

        slideBoard.style.top = moblieTop + y + "px";

        slideBoard.style.height = $(window).height() - y - moblieTop + "px";

        if (parseInt(slideBoard.style.top) < 0) {
            slideBoard.style.top = 0;

        }

        if (parseInt(slideBoard.style.top) > Math.ceil($(window).height()

            * initRate)) {
            slideBoard.style.top = Math.ceil($(window).height() * initRate) + "px";

            slideBoard.style.height = Math.ceil($(window).height() * (1 - initRate)) + "px";

        }

    }



    function touchEnd(e) {


        document.removeEventListener('touchmove', touchMove);

        document.removeEventListener('touchend', touchEnd);

        var dist = mobileOldY - e.changedTouches[0].clientY;

        var time = new Date().getTime() - mobileOldTIME;

        if (dist / time > 0.5) {
            moveSlideBoardTo(2);

            return;

        }

        if (dist / time < -0.5) {
            moveSlideBoardTo(0);

            return;

        }

        if (parseInt(slideBoard.style.top) < Math.ceil($(window).height() * 0.1)) {
            moveSlideBoardTo(2);

        } else if (parseInt(slideBoard.style.top) < Math.ceil($(window).height() * 0.5)) {
            moveSlideBoardTo(1);

        } else {
            moveSlideBoardTo(0);

        }




    }





    //滑动开始事件  PC

    function mouseDown(obj, evt) {


        var oldY = evt.clientY;

        var top = parseInt(obj.style.top);

        mobileOldTIME = new Date().getTime();

        document.onmousemove = function (evt) {
            var y = evt.clientY - oldY;

            obj.style.top = top + y + "px";

            obj.style.height = $(window).height() - top - y + "px";

            if (parseInt(obj.style.top) < 0) {
                obj.style.top = 0;

            }

            if (parseInt(obj.style.top) > Math.ceil($(window).height()

                * initRate)) {
                obj.style.top = Math.ceil($(window).height() * initRate) + "px";

                obj.style.height = Math.ceil($(window).height() * (1 - initRate)) + "px";

            }



        }

        // input.value = Math.ceil(parseInt(obj.style.left) / 400 * 1000);

        document.onmouseup = function (evt) {
            document.onmouseup = null;

            document.onmousemove = null;



            var dist = oldY - evt.clientY;

            var time = new Date().getTime() - mobileOldTIME;

            if (dist / time > 0.5) {
                moveSlideBoardTo(2);

                return;

            }

            if (dist / time < -0.5) {
                moveSlideBoardTo(0);

                return;

            }

            if (parseInt(slideBoard.style.top) < Math.ceil($(window).height() * 0.1)) {
                moveSlideBoardTo(2);

            } else if (parseInt(slideBoard.style.top) < Math.ceil($(window).height() * 0.5)) {
                moveSlideBoardTo(1);

            } else {
                moveSlideBoardTo(0);

            }

        }



    }



    //点击设置隐藏 或者 显示滑动面板

    function hideAndShowSlideBoard() {
        var slideBoard2 = document.getElementById('slideBoard');

        slideBoard2.style.top = Math.ceil($(window).height() * initRate) + "px";

        slideBoard2.style.height = Math.ceil($(window).height() * (1 - initRate)) + "px";

        if (countClick == 0) {
            slideBoard2.style.display = 'block';

            countClick = 1;

            return;

        }



        if (countClick == 1) {
            // slideBoard2.style.display = 'none';

            countClick = 0;

            return;

        }



    }



    var loopCount = 0;

    var loopID;

    //移动滑板到某位置  mobile PC

    function moveSlideBoardTo(location) {
        var moveTime = 100;

        var moveIntervalTime = 10;

        var locationRate = 1;

        var rate = moveTime / moveIntervalTime;

        loopCount = 0;

        if (location == 0) {
            locationRate = 0.25;

        } else if (location == 1) {
            locationRate = 0.75;

        } else {
            locationRate = 1;

        }

        if (Math.ceil((1 - locationRate) * $(window).height()) == parseInt(slideBoard.style.top)) {
            return;

        } else if (Math.ceil((1 - locationRate) * $(window).height()) < parseInt(slideBoard.style.top)) {//需要上升

            var dist = parseInt(slideBoard.style.top) - (1 - locationRate) * $(window).height();

            var perdist = Math.ceil(dist / rate);

            loopID = setInterval("moveUp(" + perdist + "," + rate + "," + locationRate + ")", moveIntervalTime);



        } else {//下降

            var dist = (1 - locationRate) * $(window).height() - parseInt(slideBoard.style.top);

            var perdist = Math.ceil(dist / rate);

            loopID = setInterval("moveDown(" + perdist + "," + rate + "," + locationRate + ")", moveIntervalTime);



        }




    }



    //上移函数

    function moveUp(perdist, rate, locationRate) {
        if (loopCount != rate) {
            slideBoard.style.top = parseInt(slideBoard.style.top) - perdist + "px";

            slideBoard.style.height = $(window).height() - parseInt(slideBoard.style.top) + "px";

            loopCount = loopCount + 1;

        } else {
            slideBoard.style.top = Math.ceil((1 - locationRate) * $(window).height()) + "px";

            slideBoard.style.height = $(window).height() - parseInt(slideBoard.style.top) + "px";

            clearInterval(loopID);

        }

    }

    //下移函数

    function moveDown(perdist, rate, locationRate) {
        if (loopCount != rate) {
            slideBoard.style.top = parseInt(slideBoard.style.top) + perdist + "px";

            slideBoard.style.height = $(window).height() - parseInt(slideBoard.style.top) + "px";

            loopCount = loopCount + 1;

        } else {
            slideBoard.style.top = Math.ceil((1 - locationRate) * $(window).height()) + "px";

            slideBoard.style.height = $(window).height() - parseInt(slideBoard.style.top) + "px";

            clearInterval(loopID);

        }

    }



</script>



</body>



</html>
